<template>
	<view class="user-container">
		<view class="head">
			<view class="fix" style="justify-content: space-between;width: 100%;">
				<view class="fix">
					<view class="avatar-box">
						<image class="avatar-img" mode="aspectFit" src="/static/images/test.jpeg"></image>
					</view>
					<view class="user">
						<view class="fontB">{{userInfo.nickName}}</view>
						<view class="fontA">ID:{{userInfo.id}}</view>
					</view>
				</view>
				<view class="gold">
					{{$t('my.balance')}}：{{userInfo.gold?userInfo.gold:0}}
				</view>
			</view>
		</view>
		<!-- card -->
		<view class="info">
			<view class="left">
				<view class="txt">{{$t('my.vipGrade')}}：{{tips}}</view>
				<view class="txt">{{$t('my.todayNum')}}：{{getVipData}}</view>
				<view class="txt" v-if="userInfo.vipTime">{{$t('my.spirate')}}：{{userInfo.vipTime}}</view>
			</view>
			<view class="right">
				<tui-button type='primary' plain height="60rpx" size='26' @click="showAgent=true"
					style="margin-bottom: 20rpx;">申请代理</tui-button>
				<!-- <tui-button type='primary' plain height="60rpx" size='26'
					@click="goCharge">{{$t('my.recharge')}}</tui-button> -->
			</view>
		</view>
		<view class="head">
			<view class="d2">
				<image class="avatar-img" src="/static/images/test.jpeg" @click="handleNavigateTo('openVip')"></image>
				<view> {{$t('my.openVip')}}</view>
			</view>
			<view class="d2" @click="handleNavigateTo('myWallet')">
				<image class="avatar-img" src="/static/images/test.jpeg"></image>
				<view> 我的钱包</view>
			</view>
			<view class="d2" @click="handleNavigateTo('promotion')">
				<image class="avatar-img" src="/static/images/test.jpeg"></image>
				<view> 推广中心</view>
			</view>
			<view class="d2">
				<image class="avatar-img" src="/static/images/test.jpeg"></image>
				<view> {{$t('my.groups')}}</view>
			</view>
		</view>
		<view>
			<view class="d3" @click="goHistory('history')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/log.png"></image>
					{{$t('my.seeRecords')}}
				</view>
				<view class="d3d">
					{{userInfo.gCount }}{{$t('my.movies')}}
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<view class="d3" @click="goHistory('collect')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/heart.png"></image>
					{{$t('my.storeRecords')}}
				</view>
				<view class="d3d">
					{{userInfo.sCount }}{{$t('my.movies')}}
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<view class="d3" @click="handleNavigateTo('promotion')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/share.png"></image>
					{{$t('my.promotion')}}
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<view class="d3" @click="handleContact">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					{{$t('my.contact')}}
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<view class="d3" @click="handleNavigateTo('bindPhone')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					{{$t('my.bind')}}
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<view class="d3" @click="handleNavigateTo('personal')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					{{$t('my.personal')}}
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<!-- 语言设置 -->
			<view class="d3">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					{{$t('my.multiLang')}}
				</view>
				<view class="d3d lang">
					<picker @change="bindPickerChange" :value="index" :range="array" style="width: 100%;">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<!-- 游戏代理 -->
			<view class="d3" @click="handleNavigateTo('gameAgent')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					{{$t('my.gameAgent')}}
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
			<!-- 登录 -->
			<view class="d3" @click="handleNavigateTo('login')">
				<view class="d3a">
					<image class="d3c" src="/static/images/icon/service.png"></image>
					登录
				</view>
				<view>
					<uni-icons type="right" size="18" color="#bbc3d5"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 联系客服弹框 -->
		<ContactUs :showModal="showContact" @close="showContact = false" />
		<tui-modal :show="showAgent" @click="goApplyAgent" @cancel="showAgent=false" content="确定去申请代理吗？"></tui-modal>
	</view>
</template>

<script>
	import ContactUs from './contactUs/contactUs.vue';

	import {
		formatDateTime
	} from '@/utils/timeTools.js'
	export default {
		components: {
			ContactUs,
		},
		data() {
			return {
				userInfo: {},
				showContact: false,
				showAgent: false,
				tips: '无',
				isUseOut: false,
				index: 0,
				array: ['中文', '英语', '泰语', '日语'],
			}
		},
		onShow() {
			// 获取设备ID 用户信息
			this.$store.dispatch('getDeviceId')
			// this.userInfo = this.$store.state.user.user
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.$set(this.userInfo,'gold',JSON.parse(uni.getStorageSync('userInfo')).gold)
			if (this.userInfo.vipTime) {
				this.userInfo.vipTime = formatDateTime(this.userInfo.vipTime)
			}
		},
		computed: {
			getVipData() {
				if (this.userInfo.vip) this.tips = 'VIP' + this.userInfo.vip
					// 如果vip到期时间大于当前时间，就可看无限次
					if(new Date(this.userInfo.vipTime).getTime()>=new Date().getTime()){
						return '-/-' 
					}else if(this.userInfo.phone){
						return '-/-' 
					}else{
						return  this.userInfo.useViewsNum + '/' + this.userInfo.viewsNum
					}
			}
		},
		onLoad(options) {
			uni.$on('updateUserInfo', (data) => {
				if (data) {
					this.$store.dispatch('getDeviceId')
				}
			});
		},
		onUnload() {
			// 页面销毁时移除监听，防止重复绑定
			uni.$off('updateUserInfo');
		},
		methods: {
			goApplyAgent() {
				this.showAgent = false
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			handleContact() {
				this.showContact = true
			},
			// 跳转user下面的页面
			handleNavigateTo(urlStr, type) {
				// 游戏代理时要判断
				if (urlStr == 'gameAgent') {
					uni.showToast({
						title: '您还不是178的游戏代理，咨询请联系“XXXXX””',
						duration: 3000,
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `/pages/user/${urlStr}/${urlStr}`
				})

			},
			goCharge(urlStr) {
				uni.navigateTo({
					url: `/pages/user/myWallet/recharge`
				})
			},
			// 历史或者观影记录
			goHistory(type) {
				uni.navigateTo({
					url: `/pages/recommend/twoColumn?type=${type}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user-container {
		padding: 20rpx;

		.avatar-box {
			margin-right: 20rpx;
		}

		.avatar-img {
			width: 50px;
			height: 50px;
			/* 将图片的边框半径设置为宽度和高度的一半，使其呈现圆形 */
			border-radius: 50%;
			/* 确保图片完全填充容器 */
			object-fit: cover;
		}

		.fix {
			display: flex;
			align-items: center;
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;

			.left {
				margin-top: 15rpx;

				.txt {
					font-size: var(--title-size);
					margin-bottom: 10rpx;
					color: var(--txt-color-black);
				}
			}

			.right {
				width: 25%;
			}
		}

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.section {
			padding-left: 20rpx;
			margin: 10rpx 0;
			font-size: var(--title-size);
		}

		.fontB {
			font-weight: bold;
			font-size: 30rpx;
		}

		.fontA {
			color: #a6a6a6;
			font-size: 14px;
		}

	}

	.card {
		border: 1px solid #d5d5d5;
		box-shadow: 0rpx 0rpx 6rpx #d5d5d5;
		border-radius: 15rpx;
		padding: 20rpx 40rpx;
		margin: 10px;
		font-size: 26rpx;
	}

	.d2 {
		margin: 10px;
		color: var(--txt-color-black);
	}

	.d3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6rpx 0;
		border-bottom: 1px solid #f2f2f2;
	}

	.lang {
		display: flex;
		width: 70%;
		text-align: right;
	}


	.d3a {
		display: flex;
		align-items: center;
		color: var(--txt-color-black);
		font-size: 28rpx;
	}

	.d3b {
		width: 16px;
		height: 12px;
		margin-right: 10px;
	}

	.d3c {
		width: 16px;
		height: 16px;
		margin: 10px;
		padding-top: 4px;
		/* vertical-align: middle; */
	}

	.d3d {
		color: #bcbcbc;
		font-size: 28rpx;
	}

	.gold {
		margin-right: 20rpx;
	}

	::v-deep .tui-button__wrap .tui-btn__flex-1 .tui-button__hover {
		// padding-left:  30rpx !important;
		// padding-right: 30rpx;
		// height: 30px !important;
		// line-height: 26rpx !important;
		// font-size: 12px;
		padding: 5rpx !important;
	}

	::v-deep .uni-button:after {
		// padding-left:  30rpx !important;
		// padding-right: 30rpx;
		padding: 5rpx !important;
	}

	::v-deep .uni-picker {
		width: 100% !important;
	}
</style>